<template>
    <div class="main">
        <el-descriptions class="margin-top" title="个人信息" :column="3" border>
            <template slot="extra">
                <el-button type="primary" size="small" @click="dialogVisible = true">修改密码</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    用户名
                </template>
                {{ information.name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-monitor"></i>
                    学号
                </template>
                {{ information.studentId }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-school"></i>
                    专业
                </template>
                {{ information.major }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    年级
                </template>
                {{ information.grade }}
            </el-descriptions-item>
        </el-descriptions>

        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="20%">
            <el-form :model="information" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="information.password"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="save">保存</el-button>
            </span>
        </el-dialog>

        <div id="cow2" style=" height: 300px;margin-top: 150px;display: flex">
            <div id="panel" style=" height: 300px;width: 90%;">
                <percent></percent>
            </div>
            <div id="panel" style=" height: 300px;width: 90%;">
                <Polygonometry></Polygonometry>
            </div>
        </div>
    </div>

</template>

<script>
import Cookies from 'js-cookie'
import request from "@/utils/request";
import md5 from 'js-md5'
import Polygonometry from "@/views/userPage/polygonometry.vue";
import percent from "@/views/userPage/percent.vue";

export default {
    components: {Polygonometry, percent},
    data() {
        return {
            user: {},
            information: {},
            dialogVisible: false,
            rules: {
                password: [{required: true, message: '请填写密码', trigger: 'blur'}]
            }
        }
    },
    created() {
        this.user = JSON.parse(Cookies.get('user'))
        this.info()
    },
    methods: {
        info() {
            let id = this.user.id
            request.get(`/user/${id}`).then(res => {
                if (res.code === '200') {
                    this.information = res.data
                    this.$set(this.information, 'password', '')
                }
            })
        },
        save() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let data = JSON.parse(JSON.stringify(this.information))
                    let password = md5(this.information.password + 'qingge')
                    data.password = password
                    request.put(`/user/update`, data).then(res => {
                        if (res.code === '200') {
                            this.dialogVisible = false
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$router.push('/userlogin')
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped>
.main {
    padding: 20px;
    padding-right: 50px;
}

</style>
